<template>
    <div class="zujian">
        <div class="box ">
             <div class="pictrue scroll"  >  
                <img src="https://19912676.s61i.faiusr.com/4/AD0I5K_-CRAEGAAg75-x6AUo4eHxIzDpAjiAAg.png.webp" alt="">
            </div>
            <div class="topic scroll" ref="topic">
                <span>
                    展示型小程序
                </span>
            </div>
            <div class="wenzi scroll"> <!-- 放文字 -->
                <p>
                    微信公众号+小程序企业展示相互关联用小程序成就你的内容品牌
                </p>

            </div>
        </div>
    </div>
  
  
</template>

<script >
export default {
    name:'SorT',
    // data(){
    //     return {
    //         top1:0,

    //     }
    // },
    // methods:{
    //     getheight(e){

    //         e.currentTarget  //获取当前dom元素后可进行操作
    //         //获取元素距离视口高度
            
    //         var top1 = e.currentTarget.getBoundingClientRect().top 
    //         console.log(top1)
    //         var gao=document.body.clientHeight
    //         console.log(gao)
    //         // if(top1<gao){
    //         //     this.$ref.topic.classList.add("yidong");

    //         // }
    //         //获取滚动条位置
    //         // this.$ref.top.style.top = top + 'px';
    //         // //使用classList给top元素添加类名
    //         // this.$ref.top.classList.add("classname1");
    //         // //add、remove、toggle（检测是否有类名然后添加或删除）

            
    //     }
    // }
    // watch:{
    //     yiDong(newh , oldh){
    //         console.log(e)
    //         var top1=0
    //         this.top1=e.currentTarget.getBoundingClientRect().top 
    //         console.log(top1)
    //         return top1


    //     }

    // }

}
</script>

<style scoped>
    .zujian{
        display: inline-block;
        margin: 0 19px;    
    }
    .box{
        width: 361px;
        /* position: relative; */
/* 
        display: flex;
        justify-content: center; */
        height: auto;
        text-align: center;
        font-size: 14px;
        overflow: hidden;
    }
    .pictrue{ 
        /* margin-bottom: 40px; */
        display: inline-block;
        /* position: absolute; */
        /* float: right; */
        overflow: hidden;
        width: 340px;
        height: 230px;
        /* background-color: aqua; */
        border-radius: 10px;
        /* left: 50%; */
        /* margin-left: -50px;
        clear: both; */

    }
    .topic{
        margin: 30px 0;
    }
    .wenzi{
        width: 80%;
        display: inline-block;
    }
    p{
        /* position: absolute; */
        margin: 0 8px;
        line-height: 300%;


    }

</style>